<template>
<!-- 歌曲歌词页面 -->
  <div class="PlayLyric" 
   ref="palylyricEl" 
    :class="{ playing: playing }"
      @click="$emit('update:showLyric',false)"
  >
      <ul :style="{ top:  -frontLisHeight + 'px' ,transform: `translateY(${palylyricElHeight / 2}px)`}" ref="playlyricLl">
        <li 
          :class="{ active: currentLyricIndex === index }"
          v-for="(item,index) in parsedLyric"
          :key="index"
        >
        <span
            :style="{
              animationDuration: `${
                index === parsedLyric.length - 1
                  ? 5
                  : parsedLyric[index + 1].time - item.time
              }s`,
            }"
            >{{ item.text }}</span
          >
          <template v-if="item.yw">
            <br />
            <span
              :style="{
                animationDuration: `${
                  index === parsedLyric.length - 1
                    ? 5
                    : parsedLyric[index + 1].time - item.time - 1
                }s`,
              }"
              >{{ item.yw }}</span
            >
          </template>
          
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  props:["showLyric","playing","currentPlaySong","currentTime"],
  data: function(){
    return{
      lyric: '',
      frontLisHeight: 0,
      palylyricElHeight: 0,
    }
  },
  mounted: function () {
    this.palylyricElHeight = this.$refs.palylyricEl.offsetHeight;
  },
  created: function () {
    this.axios
      .get("https://apis.netstart.cn/music/lyric?id=" + this.currentPlaySongId)
      .then((res) => {
        this.lyric = res.data.lrc.lyric;
      });
  },
  computed: {
    currentPlaySongId: function(){
      return this.currentPlaySong.id;
      
    },
    //歌词转换格式
    parsedLyric: function(){
      return this.lyric
        .split("\n")
        //过滤掉空数组
        .filter( item => item)
        //正则按指定格式划分歌词并以组命名
        .map( item => {
          var match = item.match( /^\[(?<time>\d{2}:\d{2}\.\d{2,3})\] *(?<text>.*)$/im );
          return match.groups;
        })
        //把时间变成s单位
        .map( o => {
          var match = o.time.match(/(?<m>\d{2}):(?<s>\d{2}\.\d{2,3})/i);
            // console.log(match.groups.m * 60 + match.groups.s * 1);
            var text1 = !o.text ? '- - -' : o.text
            return{
              //解构对象同属性后面的会把前面的替换
              text : text1,
              time: (match.groups.m * 60 + match.groups.s * 1).toFixed(3)*1,
            };
        })
    },
    //查找对应的歌词序号: 秒数比目前秒数大的序号前一个
    currentLyricIndex: function(){
      var index = this.parsedLyric.findIndex( item => item.time > this.currentTime );
      return index === -1 ? this.parsedLyric.length - 1 : index - 1;
    },
    

  },
  watch: {
    currentLyricIndex: function(n){
      //截取高亮前的li数组
      var liHeight = [...this.$refs.playlyricLl.children].slice(0,n);
      //计算总高度
      var frontLisHeight = liHeight.reduce(function (total, liEl) {
        return total + liEl.offsetHeight;
      }, 0);
      this.frontLisHeight = frontLisHeight;
    },
    currentPlaySongId: function(id){
      this.axios
        .get("https://apis.netstart.cn/music/lyric?id=" + id)
        .then((res) => {
          this.lyric = res.data.lrc.lyric;
      });
    }
  }
}
</script>

<style lang="less" scoped>

@keyframes lyric {
  from {
    background-position-x: 100%;
  }
  to {
    background-position-x: 0%;
  }
}
.PlayLyric{
  mask-image: linear-gradient(
      to bottom,
      transparent 0% 5%,
      red 15% 85%,
      transparent 95% 100%
    );
  // background-color: orange;
  height: 100%;
  position: relative;
    overflow: hidden;
    color: rgb(228, 222, 222);
  ul{
    width: 100%;
    height: 100%;
    // margin-top: 50%;
    // transform: translateY(500%);
    line-height: 35px;
    text-align: center;
    position: absolute;
    top: 0;
    transition: all 0.5s;
    
    li{
      width: 100%;
      flex: 1;
          &.active {
          // color: rgb(204, 137, 248);
          span {
            background-image: linear-gradient(
              to right,
              rgb(226, 132, 255) 0% 48%,
              rgb(162, 255, 149) 52% 100%
            );
            background-size: 200%;
            background-position-x: 100%;
            background-clip: text;
            color: transparent;
            animation: lyric 3s linear 0s;
            animation-play-state: paused;
          }
        }
    }

  }
}
/* .active{
  color: blue;

} */
  &.playing {
    ul {
      li {
        &.active {
          span {
            animation-play-state: running;
          }
        }
      }
    }
  }

</style>